<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多肽地图</title>
    <style>
        html, body, #main {
            margin: 0;
            padding: 0;
        }

        #main {
            height: 800px;
        }

        #pic{
            display: none;
            position: absolute;
        }

    </style>
</head>
<body>
<div id="main"></div>
<div id="pic">
    <img src="./img/touxiang.jpg" alt="">
</div>
<script src="./js/echarts.js"></script>
<script src="./js/jquery.js"></script>
<script>
    require.config({
        paths: {
            echarts: './js/build/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/map'
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            var cityMap = {
                "zho": "click",
            };
//            var curIndx = 0;
            var mapType = [];
            var mapGeoData = require('echarts/util/mapData/params');
            console.log(mapGeoData)
            for (var city in cityMap) {
                mapType.push(city);
                // 自定义扩展图表类型
                mapGeoData.params[city] = {
                    getGeoJson: (function (c) {
                        var geoJsonName = cityMap[c];
                        return function (callback) {
                            $.getJSON('./data/' + geoJsonName + '.json', callback);
                        }
                    })(city)
                }
            }

//
//            var ecConfig = require('echarts/config');
//            var zrEvent = require('zrender/tool/event');

            myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                curIndx++;
                console.log(event.offsetX);
                console.log(event.offsetY);
                var mt = mapType[curIndx % mapType.length];
                option.series[0].mapType = mt;
                option.title.subtext = mt + ' （滚轮或点击切换）';
                myChart.setOption(option, true);

                var x = event.offsetX+"px";
                var y = event.offsetY+"px";

                $("#pic").show().css({"top":y,"left":x})

            });
            var option = {
                title: {
                    text : '全国344个主要城市（县）地图 by Pactera 陈然',
                    link : 'http://www.pactera.com/',
                    subtext : '北京市 （滚轮或点击切换）'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: '滚轮或点击切换<br/>{b}'
                },
                series : [
                    {
                        name: '全国344个主要城市（县）地图',
                        type: 'map',
                        mapType: 'zho',
                        selectedMode : 'single',
                        roam: true,//鼠标滚轮缩放
                        hoverable: false,//鼠标经过高亮
                        itemStyle:{
                            normal: {
                                borderWidth: 2,
                                borderColor: '#cccccc',
                                color: '#f3f3f3',
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: '#ff0000'
                                    }
                                }
                            },
                            emphasis: {                 // 也是选中样式
                                borderWidth: 1,
                                borderColor: '#00ffff',
                                color: '#ffffff',
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: '#ff0000'
                                    }
                                }
                            }
                        },
                        data:[]
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);

//            function eConsole(param) {
//                console.log(param)
//            }
        }
    );

</script>
</body>
</html>